<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { NDataTable, NButton, NCard, NInput } from 'naive-ui'
import baseCard from '@/components/base-card/index.vue'
import baseTable from '@/components/base-table/index.vue'
import { useMenuRecordStore } from '@/stores/menuRecord'
import { useRouter, useRoute } from 'vue-router';
import { ADD_MEET } from "@/service/apis/meet";
// import { sseService } from "@/assets/utils/sse";
// import type { SSEChatParams } from "@/assets/utils/sse";
import { getToken } from "@/assets/utils/token";
import { SrsRtcPublisherAsync, SrsRtcPlayerAsync, SrsError, SrsRtcFormatSenders } from '../../assets/utils/webrtc'


const token = getToken();
const router = useRouter()
const route = useRoute()

const lsUser: any = localStorage.getItem('user')
const userInfo = ref<any>(JSON.parse(lsUser))
const qd: any = route.query
console.log('valvalvalvalvalvalval', route.query);
const mianVideoRef = ref()
const sdk_push: any = ref(null)//推流
const sdk_pull: any = ref(null)//拉流
const meetListref: any = ref()
const meetId = ref()
const title = ref()

const meetList: any = ref([])


onMounted(() => {
    if (qd.data) {
        const val = JSON.parse(qd.data)
        for (let index = 0; index < val.length; index++) {
            const element = val[index];
            val[index].ref = 'meetVideoRef' + index
            if (element['工号'] == userInfo.value.userInfo.code) {
                startPush(element['流地址'])
            }
        }
        meetList.value = val
        meetId.value = qd.meetId
        title.value = qd.meetTime
        console.log('解析后的数据', meetList.value);
    }
    setTimeout(() => {
        startPull()
    }, 2000)

})
onUnmounted(() => {

})

//推流
function startPush(urls?: String) {
    console.log('推流地址', urls);
    // Close PC when user replay.
    if (sdk_push.value) {
        sdk_push.value.close();
    }
    sdk_push.value = SrsRtcPublisherAsync();
    mianVideoRef.value.srcObject = sdk_push.value.stream;
    // sdk_push.value.pc.onicegatheringstatechange = function () {

    // };
    let url = urls;
    sdk_push.value.publish(url).then(function (session: any) {
        console.log('session-push', session);
    }).catch(function (reason: any) {
        sdk_push.value.close();
    });

}
//拉流
function startPull() {

    let box: any = document.getElementById('meetListref')
    for (var i = 0, len = box.children.length; i < len; i++) {
        let dom = box.children[i]
        if (dom.firstChild.nodeType == 1) {
            let domId = dom.firstChild.getElementsByTagName('video')[0].getAttribute('id')
            console.log(domId);
            meetList.value.forEach((el: any, index: number) => {

                let id = '#' + 'meetVideoRef' + index
                console.log(el.ref == domId);

                if (el.ref == domId) {
                    sdk_pull.value = SrsRtcPlayerAsync();
                    dom.firstChild.querySelector(id).srcObject = sdk_pull.value.stream
                    let url = el['流地址'];
                    sdk_pull.value.play(url).then(function (session: any) {

                    }).catch(function (reason: any) {
                        sdk_pull.value.close();
                        // console.error(reason);
                    });
                }


            })
        }
    }


};

//挂断电话
function cancelPhone() {
    sdk_push.value.close()
    // mianVideoRef.value.srcObject = null
    console.log(sdk_push.value);
    let p: any = {
        类型: "数据",
        内容: {
            应用名称: "我的电话",
            token: token,
            类型: '取消',
            meetId: meetId.value
        }
    }
    ADD_MEET({ params: JSON.stringify(p) }).then((res: any) => {
        router.push("/")
    }).catch((err) => {
        console.log(err);
    })

    mianVideoRef.value.srcObject = null

}

</script>
<template>

    <baseCard :title="title">
        <!-- <button @click="startPull">拉拉拉</button> -->
        <!-- <button @click="startPush">推推</button> -->
        <!-- <button @click="startPull">拉拉拉</button> -->
        <!-- <button @click="startPull1">拉拉11拉</button>{{userInfo.userInfo.name?userInfo.userInfo.name:''}} -->
        <div class="lay">
            <div class="lay_left" style="">
                <video ref="mianVideoRef" class="mian_video" controls autoplay></video>
                <div style="position: absolute;top: 0;left: 2;z-index: 9999;color: black;font-size: 20px;">
                    {{ userInfo.userInfo['姓名'] }}</div>
                <div style="height: 50px;padding-left:45%;">
                    <n-button type="error" circle @click="cancelPhone">
                        <n-icon>
                            <span class="iconfont icon-phone-call-hang-up"></span>
                        </n-icon>
                    </n-button>
                </div>
            </div>
            <div class="lay_center" style="" id="meetListref">
                <div id="meetListref111" v-for="(n, k) in meetList" :key="k">
                    <div ref="meetListref" v-if="n['工号'] != userInfo.userInfo.code" class="videoCard">
                        <video :id="n.ref" :ref="n.ref" class="meet_video" controls autoplay></video>
                        <div style="position: absolute;top: 0;left: 2;z-index: 9999;color: black;"><n-tag
                                type="success">
                                {{ n.姓名 }}
                            </n-tag></div>
                    </div>
                </div>

            </div>
            <!-- <div class="lay_rigth" style="">
                <div style="text-align: center;font-size: 20px;">聊天信息</div>
                    <button @click="startPush">推推</button>
                    <button @click="startPull">拉拉拉</button>
                    <button @click="startPull1">拉拉11拉</button>
                <div
                    style="text-align: center;font-size: 20px;display: flex; flex-direction: row;position: absolute;left: 0;bottom: 0;right: 0;padding: 10px;">
                    <n-input></n-input>
                    <n-button type="info" style="margin-left: 5px;">发送</n-button>
                </div>
            </div> -->
        </div>

    </baseCard>
</template>

<style src="./index.scss" scoped></style>
